<template>
  <view class="AI-card" @click="upload">
    <image src="/static/other/AI-shibie.svg" mode="widthFix"></image>
    <text>身份证智能识别</text>
  </view>
  <view class="line">
    <text>姓名</text>
    <input
      type="text"
      placeholder="请输入姓名"
      placeholder-class="placeholder-style"
      v-model="name"
    />
  </view>
  <view class="line">
    <text>出生日期</text>
    <picker @change="changeDate" mode="date" class="flex-1">
      <view class="picker">
        <text :class="{ 'placeholder-style': !born }">{{
          born == "" ? "请选择出生日期" : born
        }}</text>
        <image src="/static/other/gengduo.svg" mode="" />
      </view>
    </picker>
  </view>
  <view class="line">
    <text>性别</text>
    <picker
      @change="changeSex"
      mode="selector"
      class="flex-1"
      :range="['男', '女']"
    >
      <view class="picker">
        <text :class="{ 'placeholder-style': !sex }">{{
          sex == "" ? "请选择性别" : sex
        }}</text>
        <image src="/static/other/gengduo.svg" mode="" />
      </view>
    </picker>
  </view>
  <view class="line">
    <text>成员关系</text>
    <picker
      @change="changeRelation"
      mode="selector"
      class="flex-1"
      :range="['自己', '父母', '其他']"
    >
      <view class="picker">
        <text :class="{ 'placeholder-style': !relation }">{{
          relation == "" ? "请选择成员关系" : relation
        }}</text>
        <image src="/static/other/gengduo.svg" mode="" />
      </view>
    </picker>
  </view>
  <view class="line">
    <text>身份证</text>
    <input
      type="text"
      placeholder="请输入身份证"
      placeholder-class="placeholder-style"
      v-model="id_card"
    />
  </view>
  <view class="line">
    <text>手机号</text>
    <input
      type="text"
      placeholder="请输入手机号"
      placeholder-class="placeholder-style"
      v-model="phone"
    />
  </view>
  <view class="submit">
    <text @click="canCel">取消</text>
    <text @click="subMit">确认添加</text>
  </view>
</template>

<script setup>
import { uploadImage } from "~/untils/uploadImage";
import { reactive, toRefs } from "vue";
import { AICARD } from "~/untils/http";
import apiRequest from "~/api/index";

// picker change事件
const changeSex = (e) => {
  let arr = ["男", "女"];
  sex.value = arr[e.detail.value];
};
const changeDate = (e) => {
  born.value = e.detail.value;
};
const changeRelation = (e) => {
  let arr = ["自己", "父母", "其他"];
  relation.value = arr[e.detail.value];
};
const submitData = reactive({
  name: "",
  sex: "",
  born: "",
  relation: "",
  id_card: "",
  phone: "",
});

let { name, id_card, sex, born, phone, relation } = toRefs(submitData);

// 身份证识别
const upload = async () => {
  const res = await uploadImage(AICARD, "识别中", "识别失败");
  console.log(res);
  let data = JSON.parse(res);
  if (res.msg == "SUCCESS") {
    submitData.name = data.data.name;
    submitData.sex = data.data.sex;
    submitData.born = data.data.born;
    submitData.id_card = data.data.id_card;
  } else {
    uni.showToast({ title: data.data, icon: "none", duration: 1000 });
  }
};

// 点击取消
function canCel() {
  uni.navigateBack({
    delta: 1,
  });
}
// 点击提交
function subMit() {
  const res = apiRequest.PatientRes(submitData);
  if (res.msg == "提交成功") {
    uni.navigateBack({
      delta: 1,
    });
  }
}
</script>

<style lang="scss" scoped>
@import url("../../../common-style/form.css");
.AI-card {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  font-size: 35rpx;
  border-radius: 15rpx;
  padding: 30rpx 20rpx;
  margin: 20rpx 20rpx 50rpx 20rpx;
}
.AI-card image {
  width: 80rpx;
  height: 80rpx;
  margin-right: 20rpx;
  display: block;
}
.line {
  height: 100rpx;
  @apply flex;
  align-items: center;
  border-bottom: 1px solid #dbd7d7;
  text {
    margin-left: 20rpx;
  }
  input {
    @apply text-right;
    padding: 10rpx;
    flex: 1;
  }
  image {
    width: 50rpx;
    height: 50rpx;
    text-align: right;
  }
}

.picker {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
}
</style>
